<template>
  <el-drawer :title="!dataForm.id ? '新建' : '编辑'" :visible.sync="visible"
             :wrapperClosable="false" size="1000px" append-to-body
             class="JNPF-common-drawer">
    <div class="JNPF-flex-main">
      <div class="dynamicForm ">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                           :textStyle='{"color":"#000000","font-weight":"bold","text-decoration":"none","font-size":18,"line-height":32,"font-style":"normal","text-align":"left"}'
                           value="基本信息" :closable="false">
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-form-item label="账单编号"
                                prop="billNo">
                    <el-input v-model="dataForm.billNo"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="本次交易金额"
                                prop="transactionAmount">
                    <el-input v-model="dataForm.transactionAmount"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="交易日期"
                                prop="transactionTime">
                    <el-input v-model="dataForm.transactionTime"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="支付方式"
                                prop="paymentMethod">
                    <el-input v-model="dataForm.paymentMethod"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="支付单号"
                                prop="paymentNo">
                    <el-input v-model="dataForm.paymentNo"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="付款方"
                                prop="payer">
                    <el-input v-model="dataForm.payer"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="付款账户"
                                prop="payerAccount">
                    <el-input v-model="dataForm.payerAccount"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="凭证"
                                prop="voucher">
                    <JNPF-UploadFz v-model="dataForm.voucher"
                                   :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传">

                    </JNPF-UploadFz>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="凭证状态"
                                prop="voucherStatus">
                    <el-input v-model="dataForm.voucherStatus"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="是否生成收据 1生成2不生成"
                                prop="ireceipt">
                    <el-input v-model="dataForm.ireceipt"
                              placeholder="请输入" clearable :style='{"width":"100%"}'>

                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                           :textStyle='{"color":"#000000","font-weight":"bold","text-decoration":"none","font-size":18,"line-height":32,"font-style":"normal","text-align":"left"}'
                           value="收款明细" :closable="false">
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="0">
                <div class="JNPF-common-title">
                  <h2></h2>
                </div>
                <el-table :data="dataForm.zcgl_cw_sz_itemList" size='mini'>
                  <el-table-column type="index" width="50" label="序号" align="center"/>
                  <el-table-column prop="expenseItem" label="费用项">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.expenseItem"
                                placeholder="请输入" clearable :style='{"width":"100%"}'>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="receiveAmount" label="应收金额">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.receiveAmount"
                                placeholder="请输入" clearable :style='{"width":"100%"}'>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="receivedAmount" label="已收金额">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.receivedAmount"
                                placeholder="请输入" clearable :style='{"width":"100%"}'>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="unpaidAmount" label="未收金额">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.unpaidAmount"
                                placeholder="请输入" clearable :style='{"width":"100%"}'>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="transactionAmount" label="本次交易金额">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.transactionAmount"
                                placeholder="请输入" clearable :style='{"width":"100%"}'>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column prop="billNo" label="票据号">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.billNo"
                                placeholder="请输入" clearable :style='{"width":"100%"}'>
                      </el-input>
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="50">
                    <template slot-scope="scope">
                      <el-button size="mini" type="text" class="JNPF-table-delBtn"
                                 @click="delzcgl_cw_sz_itemList(scope.$index)">删除
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="table-actions" @click="addzcgl_cw_sz_itemList()">
                  <el-button type="text" icon="el-icon-plus">添加</el-button>
                </div>
              </el-form-item>
            </el-col>
          </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                      ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/>
      </div>
      <div class="drawer-footer">
        <el-button @click="visible = false"> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import request from '@/utils/request'
import {getDataInterfaceRes} from '@/api/systemData/dataInterface'
import {getDictionaryDataSelector} from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {
        zcgl_cw_sz_itemList: {
          "popupType": "dialog",
          "hasPage": true,
          "popupTitle": "选择数据",
          "pageSize": 20,
          "columnOptions": [],
          "interfaceId": "",
          "interfaceName": "",
          "relationOptions": [],
          "templateJson": [],
          "popupWidth": "800px"
        },
      },
      tableRows: {
        zcgl_cw_sz_itemList: {
          expenseItem: '',
          receiveAmount: '',
          receivedAmount: '',
          unpaidAmount: '',
          transactionAmount: '',
          billNo: '',
          enabledmark: undefined
        },
      },
      currVmodel: "",
      dataForm: {
        billNo: '',
        transactionAmount: '',
        transactionTime: '',
        paymentMethod: '',
        paymentNo: '',
        payer: '',
        payerAccount: '',
        voucher: [],
        voucherStatus: '',
        ireceipt: '',
        zcgl_cw_sz_itemList: [],
      },
      rules:
        {},

    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    zcgl_cw_sz_itemExist() {
      let isOk = true;
      for (let i = 0; i < this.dataForm.zcgl_cw_sz_itemList.length; i++) {
        const e = this.dataForm.zcgl_cw_sz_itemList[i];
      }
      return isOk;
    },
    clearData() {
      this.dataForm.billNo = '';
      this.dataForm.transactionAmount = '';
      this.dataForm.transactionTime = '';
      this.dataForm.paymentMethod = '';
      this.dataForm.paymentNo = '';
      this.dataForm.payer = '';
      this.dataForm.payerAccount = '';
      this.dataForm.voucher = [];
      this.dataForm.voucherStatus = '';
      this.dataForm.ireceipt = '';
      this.dataForm.zcgl_cw_sz_itemList = [];
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/example/Zcgl_cw_sz/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        } else {
          this.clearData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          if (!this.zcgl_cw_sz_itemExist()) return
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      if (!this.dataForm.id) {
        request({
          url: '/api/example/Zcgl_cw_sz',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        request({
          url: '/api/example/Zcgl_cw_sz/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    addzcgl_cw_sz_itemList() {
      let item = {
        expenseItem: undefined,
        receiveAmount: undefined,
        receivedAmount: undefined,
        unpaidAmount: undefined,
        transactionAmount: undefined,
        billNo: undefined,
      }
      this.dataForm.zcgl_cw_sz_itemList.push(item)
    },
    delzcgl_cw_sz_itemList(index) {
      this.dataForm.zcgl_cw_sz_itemList.splice(index, 1);
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = {...this.tableRows[this.currVmodel], ...data[i]}
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      _data.voucher = Array.isArray(_data.voucher) ? JSON.stringify(_data.voucher) : '[]'
      for (let i = 0; i < _data.zcgl_cw_sz_itemList.length; i++) {
        var _list = _data.zcgl_cw_sz_itemList[i];
      }
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      _dataAll.voucher = _dataAll.voucher ? JSON.parse(_dataAll.voucher) : []
      for (let i = 0; i < _dataAll.zcgl_cw_sz_itemList.length; i++) {
        var _list = _dataAll.zcgl_cw_sz_itemList[i];
      }
      this.dataForm = _dataAll
    },
  },
}

</script>
